<template>
  <!-- 搜索条件 -->
  <el-row style="margin-bottom: 5px">
    <el-col :span="22">
      <p class="pinformation">搜索条件</p>
    </el-col>
  </el-row>
  <el-form :model="queryParams" label-width="90px" ref="rightJcxmTable" :inline="true">
    <el-form-item label="检测类型：">
      {{ props.params.jclbName }}
    </el-form-item>
    <el-form-item label="检测项目：" prop="jcxmName">
      <el-input
        clearable
        v-model.trim="queryParams.jcxmName"
        maxlength="100"
        @keyup.enter="handleQuery()"
        style="width: 100%"
      />
    </el-form-item>
    <el-form-item label="检测方法：" prop="methodCode">
      <el-input
        clearable
        v-model.trim="queryParams.methodCode"
        maxlength="100"
        @keyup.enter="handleQuery()"
      />
    </el-form-item>
    <el-form-item label-width="40px" prop="isLike">
      <el-radio v-model="queryParams.isLike" label="0">模糊搜索</el-radio>
      <el-radio v-model="queryParams.isLike" label="1">精准搜索</el-radio>
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="handleQuery()">搜索</el-button>
      &nbsp;&nbsp;
      <el-button class="business resetBtn" style="margin-left: 0" @click="resetQuery"
        >重置</el-button
      >
    </el-form-item>
  </el-form>
  <!-- 搜索条件 -->
  <!-- 检测项目列表 -->
  <el-form>
    <el-row>
      <p class="pinformation">检测项目列表</p>
      <p class="totalStyle">共 {{ total }} 条数据</p>
    </el-row>
  </el-form>

  <el-table
    id="jcxmTable"
    :data="jcxmList"
    height="60vh"
    class="business"
    ref="jcxmTableRef"
    v-loading="loading"
    :highlight-current-row="highLightRow"
    @select="handleSelectionChange"
    @row-click="rowClick"
    :header-cell-class-name="cellClass"
    border
  >
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="检测类别" align="center" prop="jclbName" width="120" />
    <el-table-column label="检测项目" align="center" prop="jcxmName" width="120">
      <template #default="scope">
        <div :id="scope.row.mJId">
          <span v-html="transformation(scope.row.jcxmName)"></span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="方法编号" align="center" prop="methodCode" width="140" />
    <el-table-column label="方法名称" align="center" prop="methodName" />
  </el-table>
  <el-row>
    <el-col :span="12">
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-col>
  </el-row>
  <!-- 检测项目列表 -->
</template>
<script setup>
import { listMethodJcxm } from "@/api/store/package";
const { proxy } = getCurrentInstance();
const highLightRow = ref(true); // 表格选中高亮样式
const loading = ref(false);
const total = ref(0);
const jcxmList = ref([]); // 右侧检测项目列表搜索结果
const column1List = ref([]);
const selecedMJIds = ref([]);
const props = defineProps({
  params: {
    type: Object,
  },
  jclbList: {
    type: Array,
  },
  // 父组件中的方法
  handleSelectionChange: {
    type: Function,
  },
});
defineExpose({
  getList,
});
const data = reactive({
  queryParams: {
    isLike: "0", // 是否模糊搜索
    pageNum: 1, // 当前页数
    pageSize: 10, // 当前页显示条数
    isMethod: "0",
    jcxmFlag: 0,
  },
});
const { queryParams } = toRefs(data);
// 对外暴露以下方法或变量
queryParams.value.jclbId = props.params.jclbId;
queryParams.value.packageId = props.params.packageId;

// 获取检测项目列表数据
function handleQuery(first) {
  queryParams.value.pageNum = 1;
  getList(first);
}

function resetQuery() {
  proxy.resetForm("rightJcxmTable");
  handleQuery();
}

function getList(first) {
  if (!first) {
    emits("getMJIds", function (data) {
      selecedMJIds.value = data;
    });
  }
  loading.value = true;
  listMethodJcxm(queryParams.value).then((res) => {
    jcxmList.value = res.rows;
    total.value = res.total;
    loading.value = false;
    // 是否默认勾选通过id判断
    nextTick(() => {
      jcxmList.value.forEach((row) => {
        if (selecedMJIds.value && selecedMJIds.value.length > 0) {
          for (const item of selecedMJIds.value) {
            if (item.mJId == row.mJId && !item.groupId) {
              proxy.$refs["jcxmTableRef"].toggleRowSelection(row);
              break;
            }
          }
        }
      });
    });
  });
}

function rowClick() {
  highLightRow.value = true;
}
emits("handleQuerySelectedJcxmList", function (data) {
  selecedMJIds.value = data;
  handleQuery(true);
});
function handleSelectionChange(selection, row) {
  const index = selection.indexOf(row);
  if (index != -1) {
    for (const item1 of selecedMJIds.value) {
      if (item1.children) {
        if (item1.children.some((item) => item.mJId == row.mJId)) {
          proxy.$modal.msgError("当前检测项目已经选择！");
          nextTick(() => {
            proxy.$refs["jcxmTableRef"].toggleRowSelection(row, false);
          });
          return;
        }
      }
    }
  }
  emits("handleJcxm", { row: row, index: index });
}
function transformation(row) {
  if (row) {
    const a = proxy.getSupAndSub(row);
    return a;
  }
}
function cellClass(row) {
  if (row.columnIndex === 0) {
    return "DisableSelection";
  }
}
const emits = defineEmits(["handleJcxm", "handleQuerySelectedJcxmList", "getMJIds"]);
</script>
<style>
.el-checkbox-group .el-checkbox {
  margin-right: 10px;
}
</style>
